<template>
  <div class="notification-view">
    <el-card class="box-card">
      <!-- 发布通知按钮 -->
      <el-button type="primary" class="publish-button" @click="openForm()">发布通知</el-button>
      <h2 class="title">通知信息列表</h2>
      <!-- 通知信息表格 -->
       <!-- stripe：为表格添加条纹样式，使行与行之间有交替的背景色 -->
      <el-table :data="notifications" style="width: 100%" class="my-table" stripe>
        <el-table-column prop="id" label="ID" width="80px"></el-table-column>
        <el-table-column prop="title" label="通知标题" width="180"></el-table-column>
        <el-table-column prop="content" label="通知内容" width="300"></el-table-column>
        <el-table-column prop="targetUser" label="推送用户" width="180"></el-table-column>
        <el-table-column prop="time" label="发布时间" width="180">
        <!-- 自定义时间格式化 -->
        <template slot-scope="scope">
          <!-- 一行的时间 -->
          {{ formatDate(scope.row.time) }}
        </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <!-- scope当前行的数据和索引 -->
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button type="text" size="mini" @click="editNotification(scope.row, scope.$index)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button type="text" size="mini" @click="deleteNotification(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 发布通知表单 -->
      <el-dialog title="发布通知" :visible.sync="showForm" width="30%" @close="resetForm">
        <el-form :model="notification" label-width="80px">
          <!-- 通知标题输入框 -->
          <el-form-item label="通知标题">
            <el-input v-model="notification.title" required></el-input>
          </el-form-item>
          <!-- 通知内容输入框 -->
          <el-form-item label="通知内容">
            <el-input type="textarea" v-model="notification.content" required></el-input>
          </el-form-item>

          <!-- 选择特定用户 -->
          <el-form-item label="特定用户">
            <el-select v-model="notification.targetUser" placeholder="请选择特定用户">
              <!-- 选项列表 -->
              <el-option label="A歌手粉丝" value="A歌手粉丝"></el-option>
              <el-option label="B歌手粉丝" value="B歌手粉丝"></el-option>
              <el-option label="C歌手粉丝" value="C歌手粉丝"></el-option>
              <el-option label="所有用户" value="所有用户"></el-option>
              <!-- 根据需要添加更多选项 -->
            </el-select>
          </el-form-item>

          <!-- 提交按钮和取消按钮 -->
          <el-form-item>
            <el-button type="primary" @click="saveNotification">发布</el-button>
            <el-button @click="showForm = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据
      notification: {
        title: '',
        content: '',
        targetUser: ''
      },
      // 初始化演唱会通知列表
      notifications: [
        {
          id: 1,
          title: 'Taylor Swift演唱会延期通知',
          content: '由于意外情况，原定于本周六的演唱会将延期至下周日举行。给您带来的不便，我们深感抱歉。请留意后续通知，谢谢您的理解与支持。',
          targetUser: 'A歌手粉丝',
          time: '2024-06-12'
        },
        {
          id: 2,
          title: 'Ed Sheeran演唱会门票预售通知',
          content: '演唱会门票将于明天上午10点开始预售，数量有限，先到先得。敬请关注官方渠道，抓紧购票哦！',
          targetUser: '所有用户',
          time: '2024-06-11'
        },
        {
          id: 3,
          title: 'Adele演唱会重要通知',
          content: '为确保演唱会顺利进行，特此通知，请所有参与演唱会的工作人员于演唱会前一小时到达现场集合，做好相关准备工作。谢谢合作！',
          targetUser: 'A歌手粉丝、B歌手粉丝、C歌手粉丝',
          time: '2024-06-10'
        },
        {
        id: 5,
        title: 'Queen演唱会节目单发布',
        content: '演唱会节目单已发布，请关注官方微信公众号或App查看详细信息，希望您能度过一个愉快的演唱会之夜！',
        targetUser: 'C歌手粉丝',
        time: '2024-06-08'
        },
        {
          id: 6,
          title: 'BeyoncéKnowles演唱会特别嘉宾公布',
          content: '演唱会特别嘉宾已确认，将有多位知名歌手助阵演出。敬请期待精彩表演！',
          targetUser: 'C歌手粉丝',
          time: '2024-06-07'
        },
        {
          id: 7,
          title: 'Justin Timberlake演唱会交通及停车指南',
          content: '为了您更好地参加演唱会，特别提供演唱会交通及停车指南，请提前规划好您的行程。',
          targetUser: '所有用户',
          time: '2024-06-06'
        },
        {
          id: 8,
          title: 'Katy Perry演唱会纪念品预售通知',
          content: '演唱会纪念品将于本周五开始预售，敬请关注官方网站或App获取更多详情。',
          targetUser: 'B歌手粉丝',
          time: '2024-06-05'
        },
        {
          id: 9,
          title: 'Alicia Keys演唱会现场直播公告',
          content: '演唱会将进行现场直播，无法到场的朋友们也能通过网络观看。敬请关注我们的直播频道。',
          targetUser: '所有用户',
          time: '2024-06-04'
        },
        {
          id: 10,
          title: 'Mick Jagger演唱会现场安排说明',
          content: '为了您更好地享受演唱会，特别提供演唱会现场座位图及各个区域的服务设施说明。',
          targetUser: 'C歌手粉丝',
          time: '2024-06-03'
        },
        {
          id: 11,
          title: 'Alicia Keys演唱会后续活动安排',
          content: '演唱会结束后，我们将推出粉丝见面会、签售活动等一系列精彩活动，敬请关注后续通知。',
          targetUser: 'B歌手粉丝',
          time: '2024-06-02'
        },
        {
          id: 12,
          title: '演唱会主题曲MV发布',
          content: '演唱会主题曲MV已发布，请到官方视频平台观看，感受动人的音乐和视觉盛宴。',
          targetUser: '所有用户',
          time: '2024-06-01'
        },
        {
          id: 13,
          title: 'Lady Gaga演唱会周边商品抢购通知',
          content: '演唱会周边商品抢购通知：明天上午10点开始，现场及线上同步发售。数量有限，先到先得，速来抢购！',
          targetUser: 'A歌手粉丝',
          time: '2024-05-31'
        },
        {
          id: 14,
          title: 'Alicia Keys演唱会舞台布景公开',
          content: '演唱会舞台布景已公开，将为您呈现精彩绝伦的视觉盛宴。敬请期待！',
          targetUser: 'C歌手粉丝',
          time: '2024-05-30'
        },
        {
          id: 15,
          title: 'Lady Gaga演唱会彩排须知',
          content: '演唱会彩排将于明天下午举行，请相关工作人员提前做好准备工作，确保演出顺利',
          targetUser: '所有用户',
          time: '2024-05-29'
        },
        {
          id: 16,
          title: 'Bruno Mars演唱会预告片发布',
          content: '演唱会预告片已发布，让您提前感受演唱会的魅力。点击链接观看：[预告片链接]',
          targetUser: 'C歌手粉丝',
          time: '2024-05-28'
        },
        {
          id: 17,
          title: 'Alicia Keys演唱会安保工作通知',
          content: '为了您的安全，演唱会安保工作已全面展开，严密监控演唱会现场，确保活动的顺利进行。',
          targetUser: '所有用户',
          time: '2024-05-27'
        },
        {
          id: 18,
          title: 'Bruno Mars演唱会彩排须知',
          content: '演唱会彩排将于明天下午举行，请相关工作人员提前做好准备工作，确保演出顺利进行。',
          targetUser: 'A歌手粉丝',
          time: '2024-05-26'
        },
        {
          id: 19,
          title: 'Bruno Mars演唱会门票发售提醒',
          content: '演唱会门票将于明天开始发售，请提前做好购票准备，避免错过演唱会的精彩！',
          targetUser: 'B歌手粉丝',
          time: '2024-05-25'
        },
        {
          id: 20,
          title: 'Alicia Keys演唱会演员名单公布',
          content: '演唱会演员名单已经正式公布，将由多位实力派歌手共同演出，不容错过！',
          targetUser: '所有用户',
          time: '2024-05-24'
        }
],
      // 控制发布通知表单显示
      showForm: false,
      // 是否有在编辑的通知
      editingIndex: 0
    };
  },
  methods: {
    // 打开发布通知表单
    //新建的通知，通知在数组中的索引
    openForm(notification = null, index = -1) {
      if (notification) {
        //对象解构语法 显示原始通知的内容
        this.notification = { ...notification };
        this.editingIndex = index;
      } else {
        //重置表单
        this.resetForm();
      }
      this.showForm = true;
    },
    // 保存通知
    saveNotification() {
      if (this.editingIndex > -1) {
        this.notifications.splice(this.editingIndex, 1, { ...this.notification });
      } else {
        this.notifications.push({
          ...this.notification,
          time: new Date().toISOString().slice(0, 10),
          id: this.notifications.length + 1
        });
      }
      this.updateIds();
      this.updateLocalStorage();
      this.showForm = false;
      this.resetForm();
    },
    // 编辑通知
    editNotification(notification, index) {
      this.openForm(notification, index);
    },
    // 删除通知
    deleteNotification(notification) {
      //indexof找到要删除的通知在 notifications 数组中的索引
      const index = this.notifications.indexOf(notification);
      if (index !== -1) {
        this.notifications.splice(index, 1);//将通知从数组中移除
        this.updateIds(); // 删除后更新ID
        this.updateLocalStorage();//更新本地通知数据
      }
    },
    // 重置表单
    resetForm() {
      this.notification = {
        title: '',
        content: '',
        targetUser: ''
      };
      this.editingIndex = -1;
    },
    // 更新通知列表的ID
    updateIds() {
      this.notifications.forEach((notification, index) => {
        notification.id = index + 1;
      });
      this.updateLocalStorage();
    },
    // 更新本地存储中的通知列表
    updateLocalStorage() {
      localStorage.setItem('notifications', JSON.stringify(this.notifications));
    },
    // 格式化日期 如果 value 为空，返回空字符串；否则，格式化为 YYYY-MM-DD。
    formatDate(value) {
      if (!value) return '';
      const date = new Date(value);// 将传入的 value 转换为一个 Date 对象
      const year = date.getFullYear();
      //将月份格式化为两位数
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

<style scoped>
/* 外部容器样式 */
.notification-view {
  display: flex;
  justify-content: center; /* 水平居中 */
  padding: 20px;/*内边距*/
}

/* 卡片样式 */
.el-card {
  max-width: auto; /*根据元素内容自动调整*/
}

/* 标题样式 */
.title {
  margin-bottom: 20px; /* 底部边距 */
  font-size: 15px; /* 字体大小 */
  border-bottom: 1px solid #e0e0e0; /* 底部边框 */
  padding-bottom: 10px; /* 下内边距 */
  font-weight: normal; /* 正常字体 */
}
/* 表格样式 */
.my-table {
  margin-bottom: 20px; /* 底部边距 */
}

/* 发布按钮样式 */
.publish-button {
  margin-top: 20px; /* 顶部边距 */
}

/* 横线样式 */
.line {
  border: none;
  border-top: 1px solid #e0e0e0; /* 使用与列表下方横线相同的颜色 */
  margin-top: 20px; /* 距离标题下方的距离 */
  margin-bottom: 20px; /* 距离表格上方的距离 */
}
</style>
   
